<template>
  <div class="needKnow">
    <div class="centerBox">
      <h1 class="title">{{title}}</h1>
      <ul class="list">
        <li class="list-item" v-for="item in list" :key="item.id">{{item}}</li>
      </ul>
      <button class="button">{{button}}</button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      title: '出行须知',
      list: ['严禁携带宠物、活禽等上车', '严禁携带宠物、活禽等上车', '严禁携带宠物、活禽等上车', '严禁携带宠物、活禽等上车', '严禁携带宠物、活禽等上车'],
      button: '确定'
    }
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
.needKnow
  position: fixed
  width: 100%
  height: 100%
  background-color: #f4f4f4
  .centerBox
    position: absolute
    top: 50%
    left: 50%
    margin-top: -167px
    margin-left: -140px
    width: 280px
    height: 335px
    border: 1px solid red
    background-color: #fff
    .title
      font-weight: 600
      font-size 18px
      margin-top: 30px
    .list
      width: 180px
      height: auto
      margin: 0 auto
      margin-top: 27px
      .list-item
        list-style: inherit
        margin-bottom: 15px
        font-size: 14px
    .button
      position: absolute
      bottom: 10px
      left: 50%
      margin-left: -60px
      width: 120px
      height: 34px
      background-color: #333
      border-radius: 5px
      border: none
      outline: none
</style>